<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {padding: 0;margin: 0}
        body {height: 2000px}
        #dd1 {width: 800px;height: 300px;position: absolute}
        #dd1:hover .w div {width: 100%}
        #dd1:hover span {opacity: 1;margin-top: -10px;margin-left: -10px}
        #d1 {height: 50px;display: flex}
        #d1 span {font-size: 20px;color: #02B2B5;opacity: 0;transition: all 0.1s;margin-left: -80px}
        #d4 span {font-size: 20px;color: #02B2B5;opacity: 0;transition: all 0.1s;margin-left: -80px}
        #d2 {width: 720px;height: 310px;background: url("../zhuye/images/f59337e5c2a3419f83e649f2eea75f3f_1920x350.jpeg") no-repeat}
        #d2:hover {box-shadow: 0px 8px 10px #484b49}
        #d3 {width: 720px;height: 200px;word-wrap: break-word;margin-top: 10px}
        #d4 {height: 50px;display: flex}
        #dd2 {width: 800px;height: 300px;position: absolute;bottom: 0;transition: all 1s}
        #dd2:hover .w div {width: 100%}
        #dd2:hover span {opacity: 1;margin-top: -10px;margin-left: -10px}
        #d5 {width: 350px;height: 310px;background: url("../zhuye/images/7b96294219a09ae153309db854104801_300x400.png") no-repeat;position: absolute;left: 0;margin-top: 15px}
        #d5:hover {box-shadow: 0px 8px 10px #484b49}
        #d6 {width: 300px;height: 310px;font-size: 16px;position: absolute;right: 110px}
        #d6 li {list-style: none;margin-bottom: 20px}
        #d6 a {text-decoration: none;cursor: pointer}
        #d6 a:link {color: #02B2B5}
        #d6 a:hover {color: deepskyblue;text-decoration: underline}
        #d6 a:active {color: blue}
        #d6 a:visited {color: red}
        #dd3 {width: 80%;height: 800px;position: relative;left: 200px;top: 20px}
        .w {flex: 1;height: 10px;background-color: #eee}
        .w div {width: 10%;height: 10px;background-color: #02B2B5;transition: all 0.3s}

        button{
            background-color:#f66f6a;
            color:white;
            width: 400px;
            height: 45px;
            border:0;
            font-size: 16px;
            box-sizing: content-box;
            border-radius: 5px;
        }
        button:hover{
            background-color: #a54b4a;
        }
    </style>
</head>
<body>
<div id="dd3">
    <div id="dd1">
        <div id="d1">
            <span>关于我们</span>
            <div class="w">
                <div></div>
            </div>
        </div>
        <div id="d2"></div>
        <div id="d3">
            驴游网创立于2010年10月，2019年1月登陆美国纳斯达克，是美股市场第一支专注于在线休闲旅游的中国公司。

            得益于中国在线休闲旅游市场的高速发展以及客户的广泛支持，自2015年第四季度以来，途牛一直位居中国在线休闲旅游市场份额前列。

            截至2018年年底，驴游合作旅游服务供应商逾16500家，可以为消费者提供的跟团和自助等打包旅游产品超过220万种，还有丰富的机票、酒店、签证等单项旅游产品。截至2019年3月，途牛累计服务超过1.08亿人次出游，共获得客户点评600多万条，产品综合满意度达到93%。
        </div>
    </div>
    <div id="dd2">
        <div id="d4">
            <span>企业愿景</span>
            <div class="w">
                <div></div>
            </div>
        </div>
        <div id="d5"></div>
        <div id="d6">
            <ol>
                <li><a href="#1">愿 景：70年后世人 还认同我们</a></li>
                <li><a href="#2">使 命：品牌强国 创意立世</a></li>
                <li><a href="#3">价值观：责任、真诚、尊重、团队</a></li>
                <li><a href="#4">文化核心：见和同解、律和同修、口和无诤</a></li>
                <li><a href="#5">身和同往——"六和"文化</a></li>
                <li><a href="#6">实战观点：好策划用"脚"走，用"嘴"问，</a></li>
                <li><a href="#7">用"脑"想：</a></li>
                <li><a href="#8">实战观点：换一个角度，换一个世界</a></li>
            </ol>
        </div>
    </div>
</div>
<button onclick="tiao()" value="返回首页">返回首页</button>

</body>
<script>
    function tiao() {
        location.href="http://127.0.0.1:8085";
    }
</script>
</html>